<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="http://www.thymeleaf.org">
<head th:include="_header_include::frag(~{::title},~{},~{})">
    <title>付款明细分配比例</title>
    <style>
    </style>
</head>
<body>
<div id="repeatPaymentDetails" class="repeatPaymentDetails mainPadding" style="display: none;"> 
    <el-breadcrumb separator="/" class="elBreadcrumb marginB20">
        <el-breadcrumb-item>Home</el-breadcrumb-item>
        <el-breadcrumb-item>总裁办处理</el-breadcrumb-item>
        <el-breadcrumb-item>付款明细分配比例</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form :model="form" :rules="rules" ref="form" class="marginB20">
        <div class="borderbox padding20">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="重单资源ID：" :label-width="formLabelWidth">
                        {{clueId}}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="合同应收金额(元)：" :label-width="formLabelWidth">
                        {{amountReceivable}}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="重单客户手机号：" :label-width="formLabelWidth">
                         {{phone}}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="客户姓名：" :label-width="formLabelWidth">
                        {{customerName}}
                    </el-form-item>
                </el-col>
            </el-row>
            <!--<el-row>-->
                <!--<el-col :span="8">-->
                    <!--<el-form-item label="路费(元)：" :label-width="formLabelWidth">-->
                        <!--{{firstToll}}-->
                    <!--</el-form-item>-->
                <!--</el-col>-->
                <!--<el-col :span="8">-->
                    <!--<el-form-item label="优惠金额(元)：" :label-width="formLabelWidth">-->
                         <!--{{preferentialAmount}}-->
                    <!--</el-form-item>-->
                <!--</el-col>-->
            <!--</el-row>-->
            <el-row>
                <el-col :span="16">
                    <el-form-item label="重单申请备注：" :label-width="formLabelWidth">
                         {{remarks}}
                    </el-form-item>
                </el-col>
                <!--<el-col :span="8">-->
                    <!--<el-form-item label="赠送金额(元)：" :label-width="formLabelWidth">-->
                         <!--{{giveAmount}}-->
                    <!--</el-form-item>-->
                <!--</el-col>-->
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="签约单编号：" :label-width="formLabelWidth">
                         {{signNo}}
                    </el-form-item>
                </el-col>
            </el-row>
        </div>
    </el-form>
    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" border>
        <el-table-column type="index" width="55" label="序号" align="center">
        </el-table-column>
        <el-table-column align="center" prop="statementNo" label="结算单编号" width="200"></el-table-column>
        <el-table-column align="center" prop="payName" label="付款人姓名" width="200"></el-table-column>
        <el-table-column align="center" prop="payMode" label="付款方式" :formatter="transPayMode"></el-table-column>
        <el-table-column align="center" prop="payType" label="付款类型" :formatter="paytype"></el-table-column>
        <el-table-column align="center" prop="payTime" label="付款时间" :formatter="dateFormat"></el-table-column>
        <el-table-column align="center" prop="amountReceived" label="实收金额"></el-table-column>
        <el-table-column align="center" prop="amountEquipment" label="实收设备金额" width="110"></el-table-column>
        <el-table-column align="center" prop="preferentialAmount" label="招商政策优惠金额" width="150"></el-table-column>
        <el-table-column align="center" prop="firstToll" label="路费" width="150"></el-table-column>
        <el-table-column align="center" prop="giveAmount" label="赠送金额" width="150"></el-table-column>
        <el-table-column align="center" prop="giveType" label="赠送类型" width="150" :formatter="transGiveType"></el-table-column>
        <el-table-column align="center" prop="amountPerformance" label="业绩金额"></el-table-column>
        <el-table-column align="center" prop="amountBalance" label="余款金额"></el-table-column>
        <el-table-column align="center" prop="makeUpTime" label="预计余款补齐时间" :formatter="dateFormat"></el-table-column>
        <el-table-column align="center" prop="createTime" label="提交付款时间"></el-table-column>
        <el-table-column align="center" prop="busGroupName" label="商务组" ></el-table-column>
        <el-table-column align="center" prop="busSaleName" label="商务经理" ></el-table-column>
        <el-table-column align="center" prop="remarks" label="备注" ></el-table-column>
        <el-table-column align="center" prop="repeatRatios" label="分配比例"></el-table-column>      
        <el-table-column align="center" prop="userNames" label="重单人员"></el-table-column>  
        <el-table-column label="比例调整" align="center">
           <template slot-scope="scope">
                <el-button size="mini" @click="handleDialog(scope.$index, scope.row)">操作</el-button>
           </template>
        </el-table-column>
        <el-table-column align="center" prop="repeatRemark" label="处理备注"></el-table-column>  
    </el-table>
    <!-- dialog -->
    <el-dialog title="比例调整" :visible.sync="dialogFormVisible">
        <el-form :model="dialogForm" :rules="rules" ref="dialogForm">
            <div class="marginB10">分配比例</div>
            <el-table  class="marginB20" :data="dialogForm.dialogTableData" tooltip-effect="dark" border>
                <el-table-column align="center" prop="userNames" label="重单人员"></el-table-column> 
                <el-table-column align="center" prop="repeatRatio" label="分配比例">
                    <template slot-scope="scope">
                        <el-form-item :prop="'dialogTableData.' + scope.$index + '.repeatRatio'" :rules='rules.repeatRatio' style="width: 200px;margin:0 auto;height: 57px;">
                      <el-input style="width:90%;text-align: center;" v-model="scope.row.repeatRatio" class="ratioInput" placeholder="0.0" type="number"></el-input>%
                      </el-form-item>                           
                    </template>
                </el-table-column>
            </el-table>
            <el-form-item label="备注：" prop="textarea" label-width="70px">
                <el-input 
                    type="textarea"
                    :rows="3" maxlength="200"
                    placeholder="输入处理备注描述"
                    v-model="remark"></el-input>
            </el-form-item> 
        </el-form>
        <div slot="footer" class="f-tac">            
            <el-button type="primary" @click="submitDialogForm('dialogForm')">提 交</el-button>
            <el-button @click="dialogFormVisible = false">取 消</el-button>
        </div>
    </el-dialog>   
</div>
</body>
<div th:include="_footer_include :: #jsLib"></div>
<script th:inline="javascript">
	var businessSignDetail=[[${businessSignDetail}]];
  var payModeItem =[[${payModeItem}]];
  var giveTypeList =[[${giveTypeList}]];
	var signId = [[${signId}]];
	var orgVM =  new Vue({
        el: '#repeatPaymentDetails',
        data: function() {
            return {  
            	repeatStatus:"",
            	remark:"",
            	remarks:"",
            	repeatRemark:'',//备注    
                dialogFormVisible: false,
                form: {                    
                    
                },
                formLabelWidth: '150px',              
                dialogForm: {
                   dialogTableData: [{
                        repeatRatio:""
                    }]
                },
                clueId:"",
                amountReceivable:"",
                phone:"",
                firstToll:"",
                customerName:"",
                preferentialAmount:"",
                repeatRemark:"",
                giveAmount:"",
                signNo:"",
                tableData: [] ,
                rules:{
                    repeatRatio: [                        
                        { validator:function(rule,value,callback){
                               var reg = /^[0-9]+([.]{1}[0-9]{1,1})?$/;
                               if(value !=null && value !="null" && value !="" && !reg.test(value) ){
                                   callback(new Error("只能输入数字，如果小数请保留一位小数"));
                                 }
                             /*   else if(value !=null && value !="null"  && value !="" &&  parseFloat(value)>100){
                                 	callback(new Error("数字只能小于等于100"));
                                 }  */
                               callback();                                 
                        }, trigger: 'blur'}
                    ]
                }              
            }             
        },
        methods: {
            handleDialog(index, row){
            	if(this.repeatStatus ==0){
            		this.$message({
                        message: '当前重单状态为不重单，不可操作比例',
                       type: 'warning'
                     });
            		return ;
            	}
                console.log(index, row);
                this.dialogFormVisible=true;
                var param={};
                param.id = row.id;
                axios.post('/clue/cluerepetition/getPaymentDetailsById',param).then(function (response) {
              	  	console.log("1111 "+response.data.data.payDetailDTOs);
                  	if(null===response||response.data==null||response.data.code!='0'){
	                  	orgVM.$message({
                            message: response.data.msg,
                            type: 'warning'
                          });
	                  	  return ;
                 	}else{
                 		orgVM.dialogForm.dialogTableData = response.data.data.payDetailDTOs;
                 		orgVM.remark =response.data.data.repeatRemark;
                 	}
              	})
               .catch(function (error) {
                	console.log(error);
               })
               .then(function () {
               });  
            },
            submitDialogForm(dialogForm) {
                this.$refs[dialogForm].validate((valid) => {
                    if (valid) {
                    	var dataArray=this.dialogForm.dialogTableData ;
                    	var payDetailDTOs =[];
                    	var id = "";
                    	var num = 0;
                    	for ( var i = 0; i <dataArray.length; i++){
                    		var detail={};
                    		id= dataArray[i].id;
                    		detail.clueId= dataArray[i].clueId;
                    		if(dataArray[i].repeatRatio !=null && dataArray[i].repeatRatio != "" && dataArray[i].repeatRatio != "null" && dataArray[i].repeatRatio !="undefined"){
                    			detail.repeatRatio= dataArray[i].repeatRatio;
                    			num = parseFloat(num)+parseFloat(dataArray[i].repeatRatio) 
                    		}else{
                    			detail.repeatRatio= 0;
                    		}
                    		detail.outputTeleGroupId = dataArray[i].outputTeleGroupId;
                    		detail.teleGroupId = dataArray[i].teleGroupId;
                    		detail.repeatUser= dataArray[i].repeatUser;
                    		payDetailDTOs.push(detail);
		                }
                    	/* if(num>100){
	                    	this.$message({
	                             message: '分配比例错误，请重新输入。',
	                            type: 'warning'
	                          });
	                         return;
	                    } */
                    	var param={};
                    	param.payDetailDTOs = payDetailDTOs;
                    	param.id =id; 
                    	param.repeatRemark = this.remark;
                    	axios.post('/clue/cluerepetition/updatePayDetailById',param).then(function (response) {
   		              	  	console.log(response);
   		                  	if(null===response||response.data==null||response.data.code!='0'){
   		                  	orgVM.$message({
   	                            message: response.data.msg,
   	                            type: 'warning'
   	                          });
   			                  	  return ;
   		                 	}else{
   		                 	orgVM.$message({message:'修改成功',type:'success',duration:2000,onClose:function(){
   		                 		window.location.href="/clue/cluerepetition/repeatPaymentDetails?signId="+signId;
                            }})
   		                 		
   		                 	} 
   		              	})
   		                .catch(function (error) {
   		                	console.log(error);
   		                })
   		                .then(function () {
   		                }); 
                        // 关闭弹窗
                        this.dialogFormVisible = false; 
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
            ,
        	//日期数据格式化方法
    		dateFormat:function(row, column) {
    			var date = row[column.property];
               	if (date == undefined) {
    	               return "";
              	}
               	return moment(date).format("YYYY-MM-DD HH:mm:ss");
    		},

        transGiveType(row, column, value, index) {
            var text="";
            for(var i=0;i<giveTypeList.length;i++) {
                if(giveTypeList[i].value ==value){
                    text = giveTypeList[i].name;
                }
            }
            return text;
        },

        transPayMode(row, column, value, index) {
            var valText="";
            if(!value){
                return valText;
            }
            var vals = value.split(",");
            if(payModeItem){
                for(var j = 0 ; j < vals.length;j++  ){
                    for(var i = 0; i < payModeItem.length ; i++){
                        if(payModeItem[i].value == vals[j]){
                            if(j==0){
                                valText += payModeItem[i].name;
                            }else{
                                valText += ","+payModeItem[i].name;
                            }

                        }
                    }
                }
            }
            return valText;
        },
        paytype(row, column, cellValue, index) {
          var text="";
            if(cellValue=="1"){
              text="全款"
            }else if(cellValue=="2"){
              text="定金"
            }else if(cellValue=="3"){
              text="追加定金"
            }else if(cellValue=="4"){
              text="尾款"
            }
            return text;
        },
        },
        mounted(){
        	this.repeatStatus = businessSignDetail.repeatStatus;
        	this.clueId = businessSignDetail.clueId ;
        	this.phone = businessSignDetail.phone ;
        	this.customerName = businessSignDetail.customerName ;
        	this.remarks = businessSignDetail.remark ;
        	this.signNo = businessSignDetail.signNo ;
        	this.amountReceivable = businessSignDetail.amountReceivable ;
        	this.firstToll = businessSignDetail.firstToll ;
        	this.preferentialAmount = businessSignDetail.preferentialAmount ;
        	this.giveAmount = businessSignDetail.giveAmount ;
        	this.tableData = businessSignDetail.payDetailDTOs;
        	document.getElementById('repeatPaymentDetails').style.display = 'block';
        }
    })
</script>
</html>